<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类式组件</title>
</head>
<body>
    <div id="container"></div>

    <!-- 加载 React。-->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
    <script src="../js-react/react@16.development.js" crossorigin></script>
    <script src="../js-react/react-dom@16.development.js" crossorigin></script>
    <!-- babel.min.js用于解析将jsx语法转为js语法 -->
    <script src="../js-react/babel@6.min.js"></script>

    <script type="text/babel">
        // 1. 定义函数式组件，函数名首字母必须大写，必须要有返回值
        class Square extends React.Component {
            render() {
                return (
                    <button 
                        className="square"
                        onClick={this.toggle}
                        style={
                                {
                                background: '#fff',
                                border: '1px solid #999',
                                float: 'left',
                                fontSize: '24px',
                                fontWeight: 'bold',
                                lineHeight: '34px',
                                height: '34px',
                                marginRight: '-1px',
                                marginTop: '-1px',
                                padding: '0',
                                textAlign: 'center',
                                width: '34px',
                            }
                        }
                    >
                        {this.state.value}
                    </button>
                )
            }

            state = {value: 'O'}

            toggle = () => {
                // if (this.state.value === 'O') {
                //     this.state.value = 'X'
                // } else {
                //     this.state.value = 'O'
                // }
                // 字符转ascii码：用charCodeAt()
                // ascii码转字符：用fromCharCode()
                const val = String.fromCharCode('O'.charCodeAt() + 'X'.charCodeAt() - this.state.value.charCodeAt())
                // const val = 'O' + 'X' - this.state.value;    // C语言中单字符ASCII计算，js中没有字符类型
                this.setState({value: val}) // 此处为追加，只增加/修改 value属性的值
            }
        }

        // 2. 将组件渲染到页面，传入的DOM是组件名，且是闭合的
        ReactDOM.render(<Square/>, document.getElementById('container'))
        /*
            执行了ReactDOM.render(<Squre/>, ...)之后发生了生么？
                1. React解析组件标签，找到了Squre组件
                2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转换为真实的DOM，随后呈现在页面中
        */
    </script>
</body>
</html>